<template>
<!-- 头部-固定 -->
  <div class="header">
    <el-row>
        <el-col :span="2" class="icon-sidebar">
            <i class="iconfont" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="handleClick"></i>
        </el-col>
        <el-col :span="18" class="header-main">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :span="4" class="head-avatar">
            <el-avatar src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1194131577,2954769920&fm=26&gp=0.jpg"></el-avatar>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import Bus from '../../modules/bus'
export default {
    name: 'Header',
    data() {
        return {
            isCollapse: false,
        }
    },
    components: {

    },
    methods: {
        handleClick(){
            this.isCollapse = !this.isCollapse
            Bus.$emit('isCollapse', this.isCollapse)
            console.log('我点了这里')
        }
    }

}
</script>

<style scoped>
.header {
    /* display: flex; */
    line-height: 60px;
}
.icon-sidebar {
    display: block;
    width: 30px;
    height: 60px;
    line-height: 60px;
    text-align: left;
}
/* .el-icon-s-unfold, el-icon-s-fold {
    font-size: 26px;
    display: block;
} */

.el-breadcrumb {
    height: 60px;
    line-height: 60px;
    
}
.head-avatar {
    padding: 10px;
    height: 60px;
    line-height: 60px;
    justify-content: right;
}
.iconfont {
    cursor: pointer;
}
</style>